<%--
  Created by IntelliJ IDEA.
  User: xh
  Date: 2020/2/8
  Time: 19:54
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    <div class="layui-col-xs3">
        <div class="layui-row l-blog-user-info">
            <div class="user-img">
            <c:if test="${requestScope.user.id==sessionScope.user.id}">
                <a href="${APP_PATH}/user/toUser-info?id=${requestScope.user.id}"><img src="${APP_PATH}/img/photo-big.jpg"/></a>
                <span  class="layui-badge layui-bg-blue"> <i class="layui-icon layui-icon-male"></i> </span>
            </c:if>
            <c:if test="${requestScope.user.id!=sessionScope.user.id}">
                <a href="#"><img src="${APP_PATH}/img/photo-big.jpg"/></a>
                <span  class="layui-badge layui-bg-blue"> <i class="layui-icon layui-icon-male"></i> </span>
            </c:if>
            </div>
            <div class="user-info">
                <c:if test="${requestScope.user.id==sessionScope.user.id}">
                <a href="${APP_PATH}/user/toUser-info?id=${requestScope.user.id}" class="layui-btn layui-btn-primary layui-btn-radius layui-btn-sm setting">
                    <i class="layui-icon layui-icon-set"></i>帐号设置
                </a>
                </c:if>
                <div class="username">${requestScope.user.username}</div>
                <div class="description">${requestScope.user.introduction}</div>
            </div>
            <div class="layui-row user-statistics">
                <div class="layui-col-xs2 layui-col-xs-offset1">9999 <br/> 获赞</div>
                <div class="layui-col-xs2"><a href="">10k <br/> 粉丝 </a></div>
                <div class="layui-col-xs2"><a href="">10k <br/> 关注 </a></div>
                <div class="layui-col-xs2"><a href="">10k <br/> 积分 </a></div>
                <div class="layui-col-xs2">1 <br/> 排名</div>
            </div>
            <c:if test="${requestScope.user.id==sessionScope.user.id}">
            <div class="layui-row user-action">
                <button class="layui-btn"><i class="layui-icon layui-icon-edit" href="${APP_PATH}/blog/toAdd"></i>写博客</button>
                <button class="layui-btn layui-btn-warm"><i class="layui-icon layui-icon-help" href="${APP_PATH}/question/toAdd"></i>提问题</button>
                <button class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-reply-fill" href="${APP_PATH}/talk/toIndex"></i>发说说</button>
            </div>
            </c:if>
            <c:if test="${requestScope.user.id!=sessionScope.user.id}">
                <div class="layui-row user-action">
                    <button class="layui-btn" onclick="guanzhu(${sessionScope.user.id},${requestScope.user.id});"><i class="layui-icon layui-icon-user"></i>&nbsp;&nbsp;
                      <c:if test="${empty requestScope.guanzhu}">
                          <font id="guanzhu">关注</font>
                      </c:if>
                       <c:if test="${!empty requestScope.guanzhu}">
                           <font id="guanzhu">已关注</font>
                       </c:if>
                    </button>
                    <button class="layui-btn layui-btn-warm"><i class="layui-icon layui-icon-help" href="${APP_PATH}/question/toAdd"></i>向TA提问</button>
                </div>
            </c:if>

        </div>
        <div class="layui-row l-blog-article-type">
            <div class="l-blog-article-type-header">
                <span class="title">文章分类</span>
            </div>
            <div class="l-blog-article-type-body">
                <a href="">
                    <span class="layui-badge layui-bg-gray">Java(1)</span>
                </a>
                <a href="">
                    <span class="layui-badge layui-bg-gray">JSP/Servlet(22)</span>
                </a>
                <a href="">
                    <span class="layui-badge layui-bg-gray">数据库(123)</span>
                </a>
                <a href="">
                    <span class="layui-badge layui-bg-gray">框架开发(121)</span>
                </a>
                <a href="">
                    <span class="layui-badge layui-bg-gray">分布式架构(12)</span>
                </a>
                <a href="">
                    <span class="layui-badge layui-bg-gray">框架开发(11)</span>
                </a>
            </div>
        </div>
        <div class="layui-row l-blog-hot-article">
            <div class="l-blog-hot-article-header">
                <span class="title">热门文章</span>
                <span class="more"><a href="">更多</a></span>
            </div>
            <div class="l-blog-hot-article-body">
                <div class="layui-row l-blog-hot-article-user">
                    <div class="layui-col-xs2">
                        <div class="photo">
                            <a href="">
                                <img src="${APP_PATH}/img/photo.jpg" width="100%" height="100%" class="layui-circle">
                            </a>
                        </div>
                    </div>
                    <div class="layui-col-xs10 article">
                        <a href="">文章名称1文章名称1文章名称1文章名称1文章名称1文章名称1文章名称1文章名称1文章名称1</a>
                        <div class="details">
                            <div class="d-item"><span class="s-color-noclick">谭江海</span></div>
                            <div class="d-item item"><span>66.2K</span> 次访问</div>
                            <div class="d-item item"><i class="layui-icon layui-icon-praise"></i> <span>10.1K</span></div>
                        </div>
                    </div>
                </div>
                <div class="layui-row l-blog-hot-article-user">
                    <div class="layui-col-xs2">
                        <div class="photo">
                            <a href="">
                                <img src="${APP_PATH}/img/photo.jpg" width="100%" height="100%" class="layui-circle">
                            </a>
                        </div>
                    </div>
                    <div class="layui-col-xs10 article">
                        <a href="">文章名称1</a>
                        <div class="details">
                            <div class="d-item"><span class="s-color-noclick">谭江海</span></div>
                            <div class="d-item item"><span>66.2K</span> 次访问</div>
                            <div class="d-item item"><i class="layui-icon layui-icon-praise"></i> <span>10.1K</span></div>
                        </div>
                    </div>
                </div>
                <div class="layui-row l-blog-hot-article-user">
                    <div class="layui-col-xs2">
                        <div class="photo">
                            <a href="">
                                <img src="${APP_PATH}/img/photo.jpg" width="100%" height="100%" class="layui-circle">
                            </a>
                        </div>
                    </div>
                    <div class="layui-col-xs10 article">
                        <a href="">文章名称1</a>
                        <div class="details">
                            <div class="d-item"><span class="s-color-noclick">谭江海</span></div>
                            <div class="d-item item"><span>66.2K</span> 次访问</div>
                            <div class="d-item item"><i class="layui-icon layui-icon-praise"></i> <span>10.1K</span></div>
                        </div>
                    </div>
                </div>
                <div class="layui-row l-blog-hot-article-user">
                    <div class="layui-col-xs2">
                        <div class="photo">
                            <a href="">
                                <img src="${APP_PATH}/img/photo.jpg" width="100%" height="100%" class="layui-circle">
                            </a>
                        </div>
                    </div>
                    <div class="layui-col-xs10 article">
                        <a href="">文章名称1</a>
                        <div class="details">
                            <div class="d-item"><span class="s-color-noclick">谭江海</span></div>
                            <div class="d-item item"><span>66.2K</span> 次访问</div>
                            <div class="d-item item"><i class="layui-icon layui-icon-praise"></i> <span>10.1K</span></div>
                        </div>
                    </div>
                </div>
                <div class="layui-row l-blog-hot-article-user">
                    <div class="layui-col-xs2">
                        <div class="photo">
                            <a href="">
                                <img src="${APP_PATH}/img/photo.jpg" width="100%" height="100%" class="layui-circle">
                            </a>
                        </div>
                    </div>
                    <div class="layui-col-xs10 article">
                        <a href="">文章名称1</a>
                        <div class="details">
                            <div class="d-item"><span class="s-color-noclick">谭江海</span></div>
                            <div class="d-item item"><span>66.2K</span> 次访问</div>
                            <div class="d-item item"><i class="layui-icon layui-icon-praise"></i> <span>10.1K</span></div>
                        </div>
                    </div>
                </div>
                <div class="layui-row l-blog-hot-article-user">
                    <div class="layui-col-xs2">
                        <div class="photo">
                            <a href="">
                                <img src="${APP_PATH}/img/photo.jpg" width="100%" height="100%" class="layui-circle">
                            </a>
                        </div>
                    </div>
                    <div class="layui-col-xs10 article">
                        <a href="">文章名称1</a>
                        <div class="details">
                            <div class="d-item"><span class="s-color-noclick">谭江海</span></div>
                            <div class="d-item item"><span>66.2K</span> 次访问</div>
                            <div class="d-item item"><i class="layui-icon layui-icon-praise"></i> <span>10.1K</span></div>
                        </div>
                    </div>
                </div>
                <div class="layui-row l-blog-hot-article-user">
                    <div class="layui-col-xs2">
                        <div class="photo">
                            <a href="">
                                <img src="${APP_PATH}/img/photo.jpg" width="100%" height="100%" class="layui-circle">
                            </a>
                        </div>
                    </div>
                    <div class="layui-col-xs10 article">
                        <a href="">文章名称1</a>
                        <div class="details">
                            <div class="d-item"><span class="s-color-noclick">谭江海</span></div>
                            <div class="d-item item"><span>66.2K</span> 次访问</div>
                            <div class="d-item item"><i class="layui-icon layui-icon-praise"></i> <span>10.1K</span></div>
                        </div>
                    </div>
                </div>
                <div class="layui-row l-blog-hot-article-user">
                    <div class="layui-col-xs2">
                        <div class="photo">
                            <a href="">
                                <img src="${APP_PATH}/img/photo.jpg" width="100%" height="100%" class="layui-circle">
                            </a>
                        </div>
                    </div>
                    <div class="layui-col-xs10 article">
                        <a href="">文章名称1</a>
                        <div class="details">
                            <div class="d-item"><span class="s-color-noclick">谭江海</span></div>
                            <div class="d-item item"><span>66.2K</span> 次访问</div>
                            <div class="d-item item"><i class="layui-icon layui-icon-praise"></i> <span>10.1K</span></div>
                        </div>
                    </div>
                </div>
                <div class="layui-row l-blog-hot-article-user">
                    <div class="layui-col-xs2">
                        <div class="photo">
                            <a href="">
                                <img src="${APP_PATH}/img/photo.jpg" width="100%" height="100%" class="layui-circle">
                            </a>
                        </div>
                    </div>
                    <div class="layui-col-xs10 article">
                        <a href="">文章名称1</a>
                        <div class="details">
                            <div class="d-item"><span class="s-color-noclick">谭江海</span></div>
                            <div class="d-item item"><span>66.2K</span> 次访问</div>
                            <div class="d-item item"><i class="layui-icon layui-icon-praise"></i> <span>10.1K</span></div>
                        </div>
                    </div>
                </div>
                <div class="layui-row l-blog-hot-article-user">
                    <div class="layui-col-xs2">
                        <div class="photo">
                            <a href="">
                                <img src="${APP_PATH}/img/photo.jpg" width="100%" height="100%" class="layui-circle">
                            </a>
                        </div>
                    </div>
                    <div class="layui-col-xs10 article">
                        <a href="">文章名称1</a>
                        <div class="details">
                            <div class="d-item"><span class="s-color-noclick">谭江海</span></div>
                            <div class="d-item item"><span>66.2K</span> 次访问</div>
                            <div class="d-item item"><i class="layui-icon layui-icon-praise"></i> <span>10.1K</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script>
    function guanzhu(userId,friendId) {
        var guanzhu=$("#guanzhu");

        var loadindIndex=null;
        $.ajax({
            url : "${APP_PATH}/user/guanzhu",
            method : 'POST',
            data:{
                userId:userId,
                friendId:friendId

            }, success : function ( result ){
                if( result.success ){
                    guanzhu.html("已关注");
                    layer.msg("关注成功", {time: 1000, icon: 6, shift: 4},null);
                } else {
                    layer.msg("您已经关注过了", {time: 3000, icon: 5, shift: 6}, null);
                }
            }, complete : function(){
                layer.close(loadingIndex);
            }

        });
    }
</script>

